import { useEffect, useState } from "react";
import { initMap, addLayers } from "@/api/map.ts";
import { addWidgets } from "@/api/widgets.ts";
import { showFeatureInfo } from "@/api/featureInfo.ts";
import SideBar from "@/components/sidebar/index.tsx";

import { Switch } from "antd";
import {
  enable as enableDarkMode,
  disable as disableDarkMode,
  setFetchMethod as setDarkReaderFetchMethod,
} from "darkreader";
import "./index.css";
// import { addGroupLayer } from "@/api/groupLayer";

export default function MyMap() {
  const [systemTheme, setSystemTheme] = useState("light");
  useEffect(() => {
    initMap();
    addLayers();
    addWidgets();
    showFeatureInfo();
    // addGroupLayer()
  }, []);
  return (
    <div id="viewDiv">
      <SideBar />
      {/* <TreeList /> */}
      <Switch
        className="system-theme"
        // defaultChecked
        checked={systemTheme == "dark"}
        checkedChildren="暗黑"
        unCheckedChildren="默认"
        onChange={(e) => {
          let dom: HTMLDivElement | null = document.querySelector("#viewDiv");
          if (!e) {
            disableDarkMode();
            setSystemTheme("light");
            if (dom != null) {
              dom.style.filter = "unset";
            }
          } else if (systemTheme === "light") {
            //解决跨域报错
            setDarkReaderFetchMethod(window.fetch);
            enableDarkMode({
              //亮度
              brightness: 100,
              //饱和度
              contrast: 90,
              //色调
              sepia: 10,
            });
            if (dom != null) {
              dom.style.filter = "invert(85%)";
            }
            setSystemTheme("dark");
          }
        }}
      />
    </div>
  );
}
